<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav1{
            background-color: #16ceff;
            flex-direction: row;
            display: block;
            width: 60%;
        }

        #nav2{
            background-color: #b1ff7b;
            flex-direction: column;
            width: 60%;
            display: block;
            margin-left: 0;
        }

        .nav_li1{
            background-color: #16ceff;
            flex-direction: row;
            float: left;
            display: flex;
            margin-left: 50px;
        }

        .nav_li2{
            background-color: #16ceff;
            flex-direction: column;

            display: flex;
            margin-left: 50px;
        }



    </style>
</head>
<body>

<nav id="nav1">
    <ul>
        <li class="nav_li1">
        <a href="#">首页</a>
        </li>
        <li class="nav_li1">
            <a href="#">python文档</a>
        </li>
        <li class="nav_li1">
            <a href="#">about</a>
        </li>
        <li class="nav_li1">
            <a href="#">关于</a>
        </li>
    </ul>
</nav>


<nav id="nav2">
    <ul>
        <li class="nav_li2">
            <a href="#">一级菜单</a>
        </li>
        <li class="nav_li2">
            <a href="#">一级菜单</a>
        </li>
        <li class="nav_li2">
            <a href="#">一级菜单</a>
        </li>
        <li class="nav_li2">
            <a href="#">一级菜单</a>
        </li>
    </ul>
</nav>





</body>
</html>